<template>
  <a-card class="settings-card" title="个人信息设置">
    <div class="avatar-container">
      <a-avatar size="100" :src="userInfo.avatar" />
      <a-upload class="avatar-upload" :show-upload-list="false" :before-upload="beforeUpload" @change="handleChange">
        <a-button icon="upload">更换头像</a-button>
      </a-upload>
    </div>
    <a-form @submit.prevent="handleSubmit">
      <div class="form-item">
        <a-form-item label="账户名" class="form-label">
          <a-input v-model:value="userInfo.username" placeholder="请输入账户名" class="input-field" />
        </a-form-item>
      </div>
      <div class="form-item">
        <a-form-item label="电话号码" class="form-label">
          <a-input v-model:value="userInfo.phone" placeholder="请输入电话号码" class="input-field" />
        </a-form-item>
      </div>
      <div class="form-item">
        <a-form-item label="住址" class="form-label">
          <a-input v-model:value="userInfo.address" placeholder="请输入住址" class="input-field" />
        </a-form-item>
      </div>
      <div class="button-group">
        <a-button type="primary" html-type="submit">确定</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </div>
    </a-form>
  </a-card>
</template>

<script>
import { onMounted, ref } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import requst from '../../../util/request';

export default {
  name: 'UserInfo',
  setup() {

    const router = useRouter();
    
    const userInfo = ref({
      avatar: 'https://via.placeholder.com/100',
      username: '',
      phone: '',
      address: '',
    });

    onMounted(() => {
      requst.post('/account/get', {
        userid: sessionStorage.getItem('userid'),
        role: 'customer'
      }).then(res => {
        userInfo.value = res.data;
      }).catch(err => {
        message.error("获取用户信息失败: ", err);
      })
    });

    const beforeUpload = (file) => {
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        // 使用 Vue 3 的 message 组件
        // 这里需要根据您的 UI 库调整
        message.error('只能上传图片文件！');
      }
      return isImage;
    };

    const handleChange = (info) => {
      // if (info.file.status === 'done') {
      //   userInfo.value.avatar = info.file.response.url; // 假设服务器返回头像URL
      //   message.success('头像更换成功！');
      // } else if (info.file.status === 'error') {
      //   message.error('头像更换失败！');
      // }
      message.success('头像更换成功！');
    };

    const handleSubmit = () => {
      // 提交修改的逻辑
      requst.post('/account/edit', {
        userid: sessionStorage.getItem('userid'),
        username: userInfo.value.username,
        phone: userInfo.value.phone,
        address: userInfo.value.address,
        role: 'customer'
      }).then(res => {
        if (res.data.flag === 'success') {
          message.success('信息修改成功！');
          router.push({ name: 'InfoViewer' });
        } else {
          message.error('信息修改失败！');
        }
      }).catch(err => {
        message.error("修改信息失败: ", err);
      })
    };

    const handleCancel = () => {
      // 取消修改的逻辑
      message.info('已取消修改');
      router.push({ name: 'InfoViewer' });
    };

    return {
      userInfo,
      beforeUpload,
      handleChange,
      handleSubmit,
      handleCancel,
    };
  },
};
</script>

<style scoped>
.settings-card {
  max-width: 800px;
  /* 拓宽卡片 */
  margin: 20px auto;
  /* 居中显示 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar-container {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  margin-bottom: 20px;
  /* 头像与表单之间的间距 */
}

.avatar-upload {
  margin-left: 20px;
  /* 上传按钮与头像之间的间距 */
}

.form-item {
  display: flex;
  align-items: center;
  /* 垂直对齐 */
  margin-bottom: 16px;
  /* 控件之间的间距 */
}

.form-label {
  flex: 0 0 120px;
  /* 固定 Label 的宽度 */
  text-align: left;
  /* Label 左对齐 */
}

.input-field {
  flex: 1;
  /* 文本框占据剩余空间 */
  min-width: 250px;
  /* 设置最小宽度 */
  margin-left: auto;
  /* 文本框框体右对齐 */
}

.button-group {
  display: flex;
  justify-content: space-between;
  /* 按钮之间的间距 */
  margin-top: 20px;
  /* 按钮与表单之间的间距 */
}
</style>